<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script src="../../lib/bigscreen/js/vue.min.js"></script>

<style type="text/css">
.index_theLeft ul {
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: auto;
}

.mapContainer{
	height: 550px;width:100%;padding-left:170px;
}

.app-container{
	background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
}

.box-white {
    width: 97%;
    min-width: 897px;
    padding-bottom: 0;
    margin: 0 auto;
}

.box {
	border: 0!important;
    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
    position: relative;
    border-radius: 3px;
    background: #fff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    padding: 10px;
    padding-top:1px;
    border-left: 1px solid #d2d6de;
    border-right: 1px solid #d2d6de;
    border-bottom: 1px solid #d2d6de;
}

.sceneList-info{
	padding-top: 10px;
	padding-left: 10px;
}

.info{
	float: left;
    height: 160px;
    background: #f5f7fa;
    border: 1px solid #e5e8eb;
    border-radius: 8px;
    padding: 10px;
    margin:  10px;
    
}
.info .title{
	font-size: 16px;
    padding: 5px 10px;
    border-bottom: 1px solid #d9d9d9;
}
.info-body{
	height: 70px;
    padding: 5px 10px;
}
.info-bottons{
	padding: 10px 10px;
}
.tag-style{
	margin: -3px 5px 0 0px;
	float:right ;
}
[v-cloak]{
    display: none;
}
</style>
</head>
<body>
	<div>
		<div>
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<div class="prolist">
					<span>项目列表</span>
				</div>
				<ul class="dashboard-menu">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="changeScene(this)"  
						 <c:if test="${id !=null }">
							<c:if test="${obj.id ==id}">
						 	  class="active"
						   </c:if> 
						</c:if>
						<c:if test="${id ==null }">
							<c:if test="${status.index ==0}">
						 	 class="active"
						   </c:if> 
						</c:if>
						  sid="${obj.id}">
	                       <span class="icon-stack-overflow"></span>&nbsp;${obj.name }
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" id="app" v-cloak >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							<div class="search-container" >
									<span class="titleName">可视化管理</span>
									<span>名称：</span> 
									<input type-name="name" v-model="modelname" placeholder="名称查询" class="input input-self" />
									<input type-name="scene_id" class="scene_id" type="hidden" />
									<button onclick="add()"  class="button ml-20 bg-iot float-right"><span class="icon-plus"></span>  新增</button>
									<button id="searchbtns" @click="search()" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> 查询</button>
							</div>
							<div style="margin-top:10px;overflow: hidden;margin-top:20px;">
								<div class="info" v-for="item in visualList" style="width:350px;" >
									<div class="title">
										<span v-text="item.name"></span>
										<span style="float:right;cursor: pointer;" 
												class="intro-ico iconfont icon-edit" @click="editVisual(item.id)" ></span>
										<span class="tag tag-style" v-if="item.parent_id != null" >子界面</span>
										<span class="tag bg-green tag-style" v-if="item.dis_type == 0 " >电脑</span>
										<span class="tag bg-yellow tag-style" v-if="item.dis_type == 1" >手机</span>
									</div>
									<div class="info-body">
										<div v-text="item.description"></div>
									</div>
									<div class="info-bottons">
										<button type="button" @click="run(item.keycode)" class="layui-btn layui-btn-sm layui-btn-normal">运行</button>
										<button type="button" @click="editInfo(item.keycode)" v-if="item.parent_id == null" class="layui-btn layui-btn-sm layui-btn-normal">编辑</button>
										<button type="button" @click="setting(item.id)" class="layui-btn layui-btn-sm layui-btn-normal">设置</button>
										<button type="button" @click="copyInfo(item.id,item.keycode)" v-if="item.parent_id == null" class="layui-btn layui-btn-sm layui-btn-normal">复制</button>
										<button type="button" @click="deleteInfo(item.id)" v-if="item.id!=2" class="layui-btn layui-btn-sm layui-btn-normal">删除</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

var app = new Vue({
	el: '#app',
	data: function() {
		 return {
			 visualList: [] ,
			 scene_id: 0 ,
			 modelname: '' 
		 }
	 },
	 methods:{
		 editVisual :function(id){
			 layer.open({
			      type: 2,
			      title: '编辑信息',
			      shadeClose: true,
			      shade: 0.7,
			      maxmin: true, //开启最大化最小化按钮
			      area: ['700px', '480px'],
			      content: localUrl + '/iot/visual_detail?id='+id
			   });
		 },
		 deleteInfo:function(id){
			 var that = this ;
			 lcomfirm('是否确定删除？',function(){
					commonAjax("DELETE",localUrl+"/visual/display?id="+id, "",function(){
						tip("删除成功");
						setTimeout(function(){
							closeAll();
							that.initVisual();
						},1000)
					});
				});
		 },
		 initVisual :function(){
			// 请求改用户下组态信息的数据
			 var that = this ;
			 postAjax(localUrl + '/page/visual/display?pageSize=100&paged=1' , {scene_id :  that.scene_id } ,function(res){
				if(isOK(res)){
					that.visualList = res.data.data ;
				}else{
					that.visualList =[] ;
				}
			 });
		 },
		 run: function(keyCode){
			 window.open( basePath + '/page/visual/show.html?keyCode='+ keyCode );
		 },
		 editInfo: function(keyCode){
			 window.open( basePath + '/page/visual/index.html?keyCode='+ keyCode );
		 },
		 copyInfo: function(id , keycode){
			 layer.open({
			      type: 2,
			      title: '复制信息',
			      shadeClose: true,
			      shade: 0.7,
			      maxmin: true, //开启最大化最小化按钮
			      area: ['700px', '480px'],
			      content: localUrl + '/iot/visual_detail?keycode='+ keycode
			   });
		 },
		 setting: function(id ){
			 layer.open({
			      type: 2,
			      title: '设置信息',
			      shadeClose: true,
			      shade: 0.7,
			      maxmin: true, //开启最大化最小化按钮
			      area: ['700px', '480px'],
			      content: localUrl + '/iot/visual_setting?id='+ id
			   });
		 },
		 search: function(){
			 var that = this ;
			 postAjax(localUrl + '/page/visual/display?pageSize=100&paged=1' , {scene_id :  that.scene_id , name: that.modelname } ,function(res){
				if(isOK(res)){
					that.visualList = res.data.data ;
				}else{
					that.visualList =[] ;
				}
			 });
		 }
	 },created(){
		 
	 },mounted() {
		 this.scene_id = $(".dashboard-menu li.active").attr("sid") ;
		 if(this.scene_id == null){
			 this.scene_id = -1 ;
		 }
		 this.initVisual();
	 }
}) ;

function changeScene(obj){
	$(".dashboard-menu li").removeClass("active");
	$(obj).addClass("active");
	$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
	app.scene_id = $(".dashboard-menu li.active").attr("sid") ;
	reflash();
}
function reflash(){
	app.initVisual();
}

function add(){
	layer.open({
	      type: 2,
	      title: '新增信息',
	      shadeClose: true,
	      shade: 0.7,
	      maxmin: true, //开启最大化最小化按钮
	      area: ['700px', '480px'],
	      content: localUrl + '/iot/visual_detail'
	   });
}

$(function(){
	$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
	app.scene_id = $(".dashboard-menu li.active").attr("sid") ;
	if(app.scene_id == null ){
		app.scene_id = -1 ;
	}
})
</script>
</html>